<script setup>
import { ref,computed } from 'vue'
import { onLaunch, onShow, onLoad } from '@dcloudio/uni-app'
//引入API
import { getCartListAPI, putCartAPI } from '@/api/cart.js'
//引入子组件
import XtxGuess from '@/components/XtxGuess/index.vue'
import VKbox from '@/components/vk-data-input-number-box/vk-data-input-number-box.vue'
//引入props

//引入store
import { useMemberStore } from '@/store/index.js'
const memberStore = useMemberStore()
//滚动到底部加载更多
const guessRef = ref(null)
const onScrolltolower = async () => {
  guessRef.value.getMore()
}
//加载数据初始化页面
const cartList = ref([])
onLoad(async () => {
  const res = await getCartListAPI()
  cartList.value = res.result
  //   console.log(cartList.value)
})

const toggleSelect = async (item) => {
  const res = await putCartAPI(item.skuId, { selected: !item.selected })
  await getCartListAPI()
}

const numChange = async (item) => {
  console.log(item)
  const res = await putCartAPI(item.skuId, { count: item.count })
}
//计算总价
//获取选中列表。
const selectedList = computed(() => {
  return cartList.value.filter((item) => item.selected)
})
//计算总价
const totalPrice = computed(() => {
  return selectedList.value.reduce((total, item) => {
    return total + item.price * item.count
  }, 0)
})
</script>

<template>
  <scroll-view scroll-y @scrolltolower="onScrolltolower" style="height: 100vh">
    <view v-for="item in cartList" :key="item.id" class="cart-item">
      <view class="cart-item-checkbox">
        <checkbox :checked="item.selected" @click="toggleSelect(item)" />
      </view>
      <image :src="item.picture" mode="aspectFill" class="cart-item-img" />
      <view class="cart-item-info">
        <text class="cart-item-name">{{ item.name }}</text>
        <text class="cart-item-price">¥{{ item.price }}</text>
      </view>
      <VKbox
        v-model="item.count"
        :min="1"
        :max="item.stock"
        :step="1"
        :positive-integer="true"
        @change="numChange(item)"
      />
    </view>
    <h2 style="text-align: center; margin: 20rpx 0">猜你喜欢</h2>
    <XtxGuess ref="guessRef" />
    <view class="total-price">
      <text class="total-price-text">总价：</text>
      <text class="total-price-value">{{totalPrice}}</text>
      <button class="checkout-btn" @click="handleCheckout">去结算</button>
    </view>
  </scroll-view>
</template>

<style lang="scss">
.cart-item {
  display: flex;
  align-items: center;
  padding: 20rpx;
  border-bottom: 1rpx solid #eee;

  .cart-item-img {
    width: 150rpx;
    height: 150rpx;
    margin-right: 20rpx;
  }

  .cart-item-info {
    flex: 1;

    .cart-item-name {
      font-size: 32rpx;
      color: #333;
    }

    .cart-item-price {
      font-size: 28rpx;
      color: #27ba9b;
    }
  }
}

.cart-item-checkbox {
  width: 40rpx;
  height: 40rpx;
  margin-right: 20rpx;
}

.checkbox-icon {
  width: 100%;
  height: 100%;
}

.total-price {
  position: fixed;
  bottom: 50px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  background-color: #fff;
  border-top: 1rpx solid #eee;
}

.total-price-text {
  font-size: 32rpx;
  color: #333;
}

.total-price-value {
  font-size: 36rpx;
  color: #27ba9b;
  font-weight: bold;
}

.checkout-btn {
  margin-left: 20rpx;
  background-color: #27ba9b;
  color: #fff;
  border-radius: 40rpx;
  padding: 0 40rpx;
  font-size: 28rpx;
  height: 60rpx;
  line-height: 60rpx;
}
</style>
